<template>
  <div>
    <el-card>
      <el-row>
        <el-button size="small" @click="addPlaceBtn" type="success"
          >新增场地</el-button
        >
      </el-row></el-card
    >
    <el-card class="el-card-content" v-loading="loading">
      <el-card v-for="(item, index) in tableData" :key="index">
        <el-descriptions size="small">
          <el-descriptions-item label="场地类型:">
            <el-tag> {{ item.placetype }} </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="场地名称:">
            <el-tag> {{ item.placename }} </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="点击修改：">
            <el-tag
              class="tag-pointer"
              type="success"
              v-if="item.push == 1"
              @click="swichChangeBtn(item)"
              effect="dark"
              >租借中...</el-tag
            >
            <el-tag
              type="info"
              class="tag-pointer"
              @click="swichChangeBtn(item)"
              effect="dark"
              v-else
              >未发放</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item label="场地照片："
            ><el-button
              @click="checkDetailBtn(item)"
              type="primary"
              size="small"
              >现场图片</el-button
            >
          </el-descriptions-item>
          <el-descriptions-item label="信息修改："
            ><el-button @click="editPlaceBtn(item)" type="warning" size="small"
              >修改内容</el-button
            >
          </el-descriptions-item>
          <el-descriptions-item label="场地删除："
            ><el-button @click="deletBtn(item)" type="danger" size="small"
              >删除场地</el-button
            >
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-card>
    <!-- 详细信息 -->
    <el-dialog
      :title="thePlaceName + '的详细信息'"
      v-model="placeDetailDialogVisible"
    >
      <el-form>
        <el-form-item label="照片信息:">
          <el-image
            style="width: 200px; height: 100px"
            :src="thePlacePho"
            fit="fill"
          />
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 增加场地信息 -->
    <el-dialog v-model="placeAddDialog" title="增加场地">
      <el-form>
        <el-form-item label="场地名称：">
          <el-input v-model="myplacename"></el-input>
        </el-form-item>
        <el-form-item label="场地类型：">
          <el-input v-model="myplacetype"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="placeAddDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmAddBtn">确定增加</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改信息 -->
    <el-dialog v-model="placeEditDialog" :title="placename + '的信息修改'">
      <el-form>
        <el-form-item label="场地名称">
          <el-input v-model="placename"></el-input>
        </el-form-item>
        <el-form-item label="场地类型">
          <el-input v-model="placetype"></el-input>
        </el-form-item>
        <el-form-item label="场地照片">
          <el-input v-model="placepho"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="placeEditDialog = false">取消</el-button>
          <el-button type="primary" @click="confirEditBtn">确定修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted } from "vue";
import {
  ApiGetAddPlace,
  ApiGetPlaceList,
  ApiEditPlace,
  ApiDeletPlace,
} from "@/api/index";
import { errorMessage, infoMessage, successMessage } from "@/utils/messageTips";
import { ElMessageBox } from "element-plus";
export default defineComponent({
  name: "ApplyList",
  setup() {
    // 表格信息
    let loading = ref<boolean>(false);
    let tableData = ref<Array<any>>();
    const getPlaceList = async () => {
      loading.value = true;
      const res = (await ApiGetPlaceList()) as any;
      // tableData.value = res.reverse()
      tableData.value = res
      console.log(res);
      loading.value = false;
    };
    //  场地增加
    let myAddPlace = reactive({
      myplacetype: "",
      myplacename: "",
    });
    //  修改
    let editPlace = reactive({
      placetype: "",
      placename: "",
      placeid: "",
      placepho: "",
      push: "",
      ordernum: "",
    });
    // 暂存场地信息
    let placeInfo = reactive({
      thePlacePho: "",
      thePlaceName: "",
    });
    //
    //  所有对话框
    const AllDialogVisible = reactive<Record<string, boolean>>({
      placeDetailDialogVisible: false,
      placeAddDialog: false,
      placeEditDialog: false,
    });
    //  查看图片
    const checkDetailBtn = (info) => {
      placeInfo.thePlaceName = info.placename;
      placeInfo.thePlacePho = info.placepho;
      console.log(placeInfo.thePlacePho);
      AllDialogVisible.placeDetailDialogVisible = true;
    };
    // 增加按钮
    const addPlaceBtn = () => {
      myAddPlace.myplacetype = "";
      myAddPlace.myplacename = "";
      AllDialogVisible.placeAddDialog = true;
    };
    // 确认增加
    const confirmAddBtn = async () => {
      const res = await ApiGetAddPlace(
        myAddPlace.myplacename,
        myAddPlace.myplacetype
      );
      console.log(res);
      getPlaceList();
      AllDialogVisible.placeAddDialog = false;
    };
    // 修改按钮
    const editPlaceBtn = async (info) => {
      Object.assign(editPlace, info);
      console.log(editPlace);
      AllDialogVisible.placeEditDialog = true;
    };
    // 修改确认
    const confirEditBtn = async () => {
      console.log(editPlace);
      const res = await ApiEditPlace(
        editPlace.placeid,
        editPlace.placepho,
        editPlace.placetype,
        editPlace.placename,
        editPlace.push
      );
      getPlaceList();
      successMessage("修改成功");
      AllDialogVisible.placeEditDialog = false;
    };
    // 修改状态
    const swichChangeBtn = async (info) => {
      loading.value = true;
      Object.assign(editPlace, info);
      let pushid = info.push == 1 ? 0 : 1;
      const res = await ApiEditPlace(
        editPlace.placeid,
        editPlace.placepho,
        editPlace.placetype,
        editPlace.placename,
        pushid
      );

      successMessage("修改成功");
      loading.value = false;
      getPlaceList();
    };
    // 删除
    const deletBtn = async (info) => {
      ElMessageBox.confirm(`你确定将当前${info.placename}删除吗？`, "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "再想想",
        type: "warning",
      })
        .then(async () => {
          const res = (await ApiDeletPlace(info.placeid)) as any;
          if (res == 1) {
            successMessage("删除成功！！");
          } else {
            errorMessage("删除失败！");
          }
          getPlaceList();
        })
        .catch(() => {
          infoMessage("您取消了删除");
        });
    };

    onMounted(() => {
      getPlaceList();
    });
    return {
      tableData,
      checkDetailBtn,
      ...toRefs(placeInfo),
      ...toRefs(AllDialogVisible),
      ...toRefs(myAddPlace),
      ...toRefs(editPlace),
      confirmAddBtn,
      addPlaceBtn,
      editPlaceBtn,
      confirEditBtn,
      swichChangeBtn,
      loading,
      deletBtn,
    };
  },
});
</script>
<style lang="less" scoped>
.goods-list-title {
  display: flex;
  justify-content: center;
  h1 {
    color: rgb(109, 135, 221);
    font-size: 20px;
  }
}
.tag-pointer {
  cursor: pointer;
}
</style>